<template>
  <div id="BasicInfo">
    <span style="
    align-items: center;
    justify-content: space-around;
    flex-direction: column;
    font-size: 20px"
    >项目进度</span>
    <el-icon size="25px" @click="toSecond">
      <Setting/>
    </el-icon>
  </div>
  <div class="mainbody">
    <div id="SecondBrokenLine" style="height: 250px;width: 100%;flex: 1"/>
    <div style="flex: 1">
      <el-table :cell-style="{padding:'4px'}" :data="tableData" border max-height="250"
                style="width: 100%;font-size: 10px;">
        <el-table-column label="Date" prop="date" width="240">
        </el-table-column>
        <el-table-column label="计划工作完成量" prop="plan" width="240">
          <template #default="scope">
            <p v-show="scope.row.show">{{ scope.row.plan }}</p>
          </template>
        </el-table-column>
        <el-table-column label="实际工作完成量" prop="reality">
          <template #default="scope">
            <p v-show="scope.row.show">{{ scope.row.reality }}</p>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {Setting} from '@element-plus/icons-vue'
import * as echarts from 'echarts';
import {onMounted, onUnmounted} from "vue";
import {useProgressConfigStore} from '@/stores/ProgressConfig'
import {useProjectProgessStore} from '@/stores/ProjectProgress'
import router from "@/router";

const ProjectProgessStore = useProjectProgessStore()
const ProgressConfigStore = useProgressConfigStore()

interface data {
  date: string
  name: string
  address: string
  show: boolean
}

const tableData = ProgressConfigStore.tabledata

const toSecond = () => {
  router.push('/home/programmanagement/newconfig/2')
}

onMounted(() => {
  ProjectProgessStore.addAxis()
  ProjectProgessStore.addLineSeriesdataOne()
  ProjectProgessStore.addLineSeriesdataTwo()
  const option = {
    xAxis: ProjectProgessStore.xAxis,
    yAxis: ProjectProgessStore.yAxis,
    series: [
      ProjectProgessStore.series[0],
      ProjectProgessStore.series[1]
    ]
  };
  let myChart = echarts.init(document.getElementById('SecondBrokenLine'));
  myChart.setOption(option)
})
onUnmounted(() => {
  ProjectProgessStore.clearAll()
})

</script>

<style scoped>
.mainbody {
  display: flex;
}
</style>